/* eslint-disable consistent-return */
/* eslint-disable array-callback-return */
import React from 'react';
import { connect } from 'dva';
import { CloseOutlined, ExclamationCircleOutlined, UploadOutlined } from '@ant-design/icons';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import {
  Card,
  Button,
  Col,
  Row,
  Radio,
  DatePicker,
  Input,
  InputNumber,
  Select,
  Tooltip,
  Checkbox,
  Upload,
  message,
  Cascader,
  Spin,
  Divider,
} from 'antd';
import queryString from 'query-string';
import moment from 'moment';
import router from 'umi/router';
import FooterToolbar from '@/components/FooterToolbar';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import downloadFile, { requestHeadersMd5 } from '@/utils/utils';
import HOCSelect from '@/components/AntDesign/Select';

const { Option } = Select;
const { RangePicker } = DatePicker;
const { TextArea } = Input;
const FormItem = Form.Item;
const CheckboxGroup = Checkbox.Group;
@connect(({ busicont, loading }) => ({
  loading: loading.models.busicont || loading.models.publicdata,
  contInfo: busicont.contInfo, // 客户合同回显数据
}))
@Form.create()
class BasicForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      // 字典列表：服务类型、顺延方式、付款方式、收费规则、客户付款周期、资料收取方式、发票交付类型、发票交付方式、发票方式、发票类型、拆分规则、付款日期选择方式、产品类型、附件类型、垫付设置、是否全额
      dictList: [
        'SER_TYPE',
        'POS_WAY',
        'PAY_WAY',
        'FEE_RULE',
        'CUST_PAY_PERIOD',
        'SEND_MAT_COLT_WAY',
        'INV_DELV_TYPE',
        'INV_DELV_WAY',
        'INV_CATE',
        'INV_TYPE',
        'SPLIT_RULES',
        'SELECTION_TYPE',
        'CS_PD_CATE',
        'AFFIX_TYPE',
        'CONT_SPOT',
        'YES_NO_FLAG',
      ],
      SER_TYPE: [],
      POS_WAY: [],
      PAY_WAY: [],
      FEE_RULE: [],
      CUST_PAY_PERIOD: [],
      SEND_MAT_COLT_WAY: [],
      INV_DELV_TYPE: [],
      INV_DELV_WAY: [],
      INV_CATE: [],
      INV_TYPE: [],
      SPLIT_RULES: [],
      SELECTION_TYPE: [],
      CONT_SPOT: [],
      YES_NO_FLAG: [],
      contInfo: {},
      contId: '',
      activeKey: '',
      depList: [], // 签署部门集合
      signUserList: [], // 签署人集合
      posNum: '1', // 顺延方式
      isFullMenoy: true, // 是否含税率
      selectSelectionType: '',
      selectionTypeDays: null,
      uploadUrl: '/csApi/fileServer/uploadFile',
      downloadUrl: '/csApi/fileServer/downloadFile',
      newListContFileWord: [],
      newListContFilePdf: [],
      newListContFileOther: [],
    };
  }

  componentDidMount() {
    const { location, dispatch } = this.props;
    const { dictList } = this.state;
    const { contId } = queryString.parse(location.search);
    const { activeKey } = queryString.parse(location.search);
    this.setState({ contId, activeKey });
    dispatch({
      type: 'publicdata/fetchDictCode',
      payload: dictList,
    }).then(data => {
      const sortNumber = (a, b) => a.itemCode - b.itemCode;
      dictList.map(dict => {
        this.setState({ [dict]: data[dict].sort(sortNumber) });
      });
      // 获取签署部门列表
      this.getSignDepList(null, datas => {
        datas.map(item => {
          const temp = item;
          temp.label = item.name;
          temp.value = item.orgId;
          temp.isLeaf = item.leafFlag === 1;
        });
        this.setState({ depList: datas }, () => {
          this.getList(contId);
        });
      });
    });
  }

  // 获取数据
  getList = contId => {
    if (contId) {
      const { depList, SELECTION_TYPE } = this.state;
      const { dispatch, form } = this.props;
      dispatch({
        type: 'busicont/getCustomerDetail',
        payload: {
          contId,
        },
      }).then(response => {
        const customerObj = response.data || {};
        this.setState({ contInfo: customerObj });
        if (customerObj && customerObj.signDepId) {
          // 根据签署部门回显签署人
          this.echoSigner([customerObj.signDepId]);
          if (customerObj.compOrg.length) {
            const signDepId = [];
            customerObj.compOrg.map((item, index) => {
              if (index === 0) {
                // 签署部门列表
                this.getSignDepList(item.orgId, data => {
                  const secondData = [];
                  data.map(d => {
                    secondData.push({
                      label: d.name,
                      value: d.orgId,
                      isLeaf: d.leafFlag === 1,
                    });
                  });
                  depList.map(p => {
                    const obj = p;
                    if (p.orgId === item.orgId) {
                      obj.children = secondData;
                    }
                  });
                  this.setState({ depList });
                });
              }
              signDepId.push(item.orgId);
            });
            setTimeout(() => {
              form.setFieldsValue({ signDepId });
            }, 500);
          }
        }
        if (customerObj && customerObj.posWay) {
          this.setState({ posNum: customerObj.posWay.toString() });
        }
        if (
          customerObj &&
          customerObj.crmCustContConfig &&
          customerObj.crmCustContConfig.fullyFlag === 2
        ) {
          this.setState({ isFullMenoy: false });
        } else {
          this.setState({ isFullMenoy: true });
        }
        if (customerObj && customerObj.defaultAccoPeriod) {
          SELECTION_TYPE.map(item => {
            if (Number(item.itemCode) === customerObj.defaultAccoPeriod.selectionType) {
              this.setState({
                selectSelectionType: item.itemName,
              });
            }
          });
          this.setState({
            selectionTypeDays: customerObj.defaultAccoPeriod.accoPeriodDays,
          });
        }
      });
    } else {
      router.push('/salemanage/busicont/index');
    }
  };

  // 查询签署部门列表
  getSignDepList = (parentId, callback) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'busicont/fetchBaseDepart',
      payload: { parentId },
    }).then(response => {
      if (response.success && response.data.length) {
        callback(response.data);
      }
    });
  };

  // 选择签署部门
  selectSignDep = value => {
    const { dispatch, form } = this.props;
    form.resetFields(['signId']); // 重置签署人
    dispatch({
      type: 'busicont/updateClearData',
      payload: {},
    });
    const orgId = value[value.length - 1];
    dispatch({
      type: 'busicont/queryUserList',
      payload: { orgId },
    }).then(response => {
      if (response.success && response.data.length) {
        this.setState({ signUserList: response.data });
      } else {
        this.setState({ signUserList: [] });
        message.warning(`${response.message || '该部门下无签署人员数据！'}`);
      }
    });
  };

  // 签署部门动态加载数据
  loadAreaData = selectedOptions => {
    const { depList } = this.state;
    const targetOption = selectedOptions[selectedOptions.length - 1];
    const parentId = selectedOptions[selectedOptions.length - 1].orgId;
    targetOption.loading = true;
    const childrenData = [];
    this.getSignDepList(parentId, data => {
      data.map(item => {
        const temp = item;
        temp.label = item.name;
        temp.value = item.orgId;
        temp.isLeaf = item.leafFlag === 1;
        childrenData.push(item);
      });
    });
    setTimeout(() => {
      targetOption.loading = false;
      targetOption.children = childrenData;
      this.setState({
        depList: [...depList],
      });
    }, 1000);
  };

  // 依据签署部门回显签署人
  echoSigner = value => {
    const { dispatch } = this.props;
    const orgId = value[value.length - 1];
    dispatch({
      type: 'busicont/queryUserList',
      payload: { orgId },
    }).then(response => {
      if (response.success && response.data.length) {
        this.setState({ signUserList: response.data });
      } else {
        this.setState({ signUserList: [] });
        message.warning(`${response.message || '该部门下无签署人员数据！'}`);
      }
    });
  };

  // 选择是否全额计税
  selectFullMenoy = value => {
    if (value === '1') {
      this.setState({ isFullMenoy: true });
    } else {
      this.setState({ isFullMenoy: false });
    }
  };

  // 选择顺延方式
  selectPosWay = e => {
    this.setState({ posNum: e.target.value });
  };

  // 选择付款日期设置方式
  selectSelectionType = value => {
    const { SELECTION_TYPE } = this.state;
    SELECTION_TYPE.map(item => {
      if (item.itemCode === value) {
        this.setState({ selectSelectionType: item.itemName });
      }
    });
  };

  // 日期设置天数
  changeDays = value => {
    this.setState({ selectionTypeDays: value });
  };

  // 文件上传
  changeUpload = ({ file, fileList }, listContFile, getFieldName, fieldName) => {
    const { downloadUrl } = this.state;
    const { form } = this.props;
    const newData = listContFile.map(item => ({ ...item }));
    if (file.status === 'done' && file.response.success) {
      const fileId = file.response.data.split('|')[0];
      const fileName = file.response.data.split('|')[1];
      fileList.map(files => {
        const fileObj = files;
        fileObj.url = `${downloadUrl}?fileId=${fileId}&fileName=${fileName}`;
        fileObj.linkProps = { download: `${fileName}` };
      });
      newData.push({
        uid: file.uid,
        fileFileid: fileId,
        fileName,
        fileUrl: `${downloadUrl}?fileId=${fileId}&fileName=${fileName}`,
      });
      form.setFieldsValue({ [fieldName]: newData });
      this.setState({ [getFieldName]: newData });
      message.success('文件上传成功！');
    }
    if ((file.status === 'done' && !file.response.success) || file.status === 'error') {
      fileList.map(files => {
        const objs = files;
        if (files.status === 'error') {
          objs.response = '服务端错误';
        }
      });
      const newDatas = fileList.filter(item => item.uid !== file.uid);
      form.setFieldsValue({ [fieldName]: newDatas });
      this.setState({ [getFieldName]: newDatas });
      message.error('上传失败！');
    }
  };

  // 取消
  cancel = () => {
    const { activeKey } = this.state;
    router.push(`/salemanage/busicont/index?activeKey=${activeKey}`);
  };

  // 删除页面素材文件
  delFile = (id, listCont, type) => {
    const { contInfo } = this.state;
    const newData = listCont.filter(item => item.contFileId !== id);
    contInfo[type] = newData;
    this.setState({ contInfo });
  };

  // 禁用日期
  disabledDate = (startValue, limitDate) => {
    if (!startValue) {
      return false;
    }
    return startValue.valueOf() < moment(limitDate).valueOf();
  };

  // 提交数据
  sumSubmit = () => {
    const {
      contId,
      newListContFileWord,
      newListContFilePdf,
      newListContFileOther,
      activeKey,
    } = this.state;
    const { dispatch, contInfo, form } = this.props;
    const oldListContFileWord = contInfo.listContFileWord;
    const oldListContFilePdf = contInfo.listContFilePdf;
    const oldListContFileOther = contInfo.listContFileOther;
    let submitData = {};
    form.validateFieldsAndScroll((err, values) => {
      const temp = values;
      if (!err) {
        if (
          (values.validityPeriod.length === 2 && values.validityPeriod[0] === '') ||
          (values.validityPeriod.length === 2 && values.validityPeriod[1] === '')
        ) {
          message.warning('请选择新合同有效期结束时间');
          return;
        }
        temp.beginDate = values.validityPeriod[0].format('YYYY-MM-DD');
        temp.endDate = values.validityPeriod[1].format('YYYY-MM-DD');
        if (newListContFileWord.length) {
          newListContFileWord.map(f => {
            const ff = f;
            delete ff.uid;
          });
        }
        const listContFileWord = oldListContFileWord.concat(newListContFileWord);
        if (newListContFilePdf.length) {
          newListContFilePdf.map(f => {
            const tempValue = f;
            delete tempValue.uid;
          });
        }
        const listContFilePdf = oldListContFilePdf.concat(newListContFilePdf);
        if (newListContFileOther.length) {
          newListContFileOther.map(f => {
            const aa = f;
            delete aa.uid;
          });
        }
        const listContFileOther = oldListContFileOther.concat(newListContFileOther);
        temp.signDate = values.signDate.format('YYYY-MM-DD'); // 签约日期
        temp.custId = contInfo.custId;
        delete temp.validityPeriod;
        delete temp.listContFileWord;
        delete temp.listContFilePdf;
        delete temp.listContFileOther;
        Object.keys(values).forEach(key => {
          const currentTemp = values;
          if (key === 'selectionType') {
            currentTemp.defaultAccoPeriod[key] = values[key];
            currentTemp.defaultAccoPeriod.pdCode = '0';
            delete currentTemp[key];
          } else if (key === 'signDepId' && values[key].length) {
            currentTemp[key] = values[key][values[key].length - 1];
          }
        });
        if (values.crmCustContConfig) {
          Object.keys(values.crmCustContConfig).forEach(keys => {
            const temps = values.crmCustContConfig;
            if (
              values.crmCustContConfig[keys] === undefined ||
              values.crmCustContConfig[keys] === ''
            ) {
              temps[keys] = null;
            }
          });
        }
        submitData = {
          ...values,
          contId,
          listContFileWord,
          listContFilePdf,
          listContFileOther,
        };
        // console.log('传参', submitData);
        dispatch({
          type: 'busicont/custRenewSubmit',
          payload: submitData,
        }).then(response => {
          if (response.success) {
            message.success(`${response.message || '续签成功！'}`, 3, () => {
              router.push(`/salemanage/busicont/index?activeKey=${activeKey}`);
            });
          } else {
            message.warning(`${response.message || '续签提交数据失败：服务器端错误！'}`);
          }
        });
      }
    });
  };

  // 渲染函数
  render() {
    const {
      depList,
      signUserList,
      SER_TYPE,
      POS_WAY,
      posNum,
      PAY_WAY,
      FEE_RULE,
      CUST_PAY_PERIOD,
      SEND_MAT_COLT_WAY,
      INV_DELV_TYPE,
      INV_DELV_WAY,
      INV_CATE,
      INV_TYPE,
      SPLIT_RULES,
      SELECTION_TYPE,
      YES_NO_FLAG,
      CONT_SPOT,
      selectSelectionType,
      selectionTypeDays,
      uploadUrl,
      newListContFileWord,
      newListContFilePdf,
      newListContFileOther,
      isFullMenoy,
    } = this.state;
    const {
      form: { getFieldDecorator },
      loading,
      contInfo,
    } = this.props;
    // 表单布局
    const xl = { span: 8 };
    const lg = { span: 8 };
    const md = { span: 8 };
    const sm = 24;
    const colProps = { xl, lg, md, sm };
    const colProp = { span: 10 };
    // 下拉列表
    // 字典下拉
    const dictOL = dictList =>
      dictList.map(options => <Option key={options.itemCode}>{options.itemName}</Option>);
    // 签署人选项
    const signUserOL = signUserList.map(options => (
      <Option key={options.userId}>{options.userName}</Option>
    ));
    // 复选框内容展示
    const checkboxOptions = list => {
      const arr = [];
      list.map(item => {
        const obj = {};
        obj.label = item.itemName;
        obj.value = item.itemCode;
        arr.push(obj);
      });
      return arr;
    };
    // 上传部分
    const uploadFileFormat = e => {
      if (Array.isArray(e)) {
        return e;
      }
      return e && e.fileList;
    };
    // 合同电子版WORD版
    const propsUploadWord = {
      action: uploadUrl,
      headers: requestHeadersMd5(),
      /* 上传前判断文件类型 */
      beforeUpload: (file, fileList) => {
        let temp = fileList;
        const { form } = this.props;
        const fileTye = [
          'application/msword',
          'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
          'docx',
          'dotx',
          'doc',
          'dot',
        ];
        const isType = !file.type ? file.name && file.name.split('.')[1] : file.type;
        const isWord = fileTye.indexOf(isType) > -1;
        if (!isWord) {
          message.error('文件格式错误，请上传word格式!');
          temp = fileList.splice(fileList.length - 1, 1);
          form.setFieldsValue({ newListContFileWord: temp });
          return false;
        }
      },
      onChange: info =>
        this.changeUpload(info, newListContFileWord, 'newListContFileWord', 'listContFileWord'),
    };
    // 上传pdf文件
    const propsUploadPdf = {
      action: uploadUrl,
      headers: requestHeadersMd5(),
      /* 上传前判断文件类型 */
      beforeUpload: (file, fileList) => {
        const { form } = this.props;
        const fileTye = ['application/pdf', 'pdf'];
        const isPdf = fileTye.indexOf(file.type) > -1;
        let temp = fileList;
        if (!isPdf) {
          message.error('文件格式错误，请上传pdf格式!');
          temp = fileList.splice(fileList.length - 1, 1);
          form.setFieldsValue({ newListContFilePdf: temp });
          return false;
        }
      },
      onChange: info =>
        this.changeUpload(info, newListContFilePdf, 'newListContFilePdf', 'listContFilePdf'),
    };
    // 其他文件
    const propsUpload = {
      action: uploadUrl,
      headers: requestHeadersMd5(),
      onChange: info =>
        this.changeUpload(info, newListContFileOther, 'newListContFileOther', 'listContFileOther'),
    };

    return (
      <Spin tip="Loading..." spinning={loading}>
        <Form layout="vertical">
          <PageHeaderWrapper>
            <Card title={<span style={{ fontWeight: 'bolder' }}>商务合同</span>}>
              <Row gutter={64}>
                <Col {...colProps}>
                  <FormItem label="客户名称">
                    {getFieldDecorator('custId', {
                      rules: [{ required: false, message: '请选择' }],
                      initialValue: contInfo.custName,
                    })(<Input disabled />)}
                  </FormItem>
                </Col>
                <Col {...colProps}>
                  <FormItem label="合同名称">
                    {getFieldDecorator('contName', {
                      rules: [{ required: true, message: '请输入' }],
                      initialValue: contInfo.contName,
                    })(<Input placeholder="请输入" maxLength={100} />)}
                  </FormItem>
                </Col>
                <Col {...colProps}>
                  <FormItem label="服务类型">
                    {getFieldDecorator('serType', {
                      rules: [{ required: false, message: '请选择' }],
                      initialValue: contInfo && contInfo.serType && contInfo.serType.toString(),
                    })(
                      <Select placeholder="请选择" disabled>
                        {dictOL(SER_TYPE)}
                      </Select>
                    )}
                  </FormItem>
                </Col>
              </Row>
              <Row gutter={64}>
                <Col {...colProps}>
                  <FormItem label="签约日期">
                    {getFieldDecorator('signDate', {
                      rules: [{ required: true, message: '请选择' }],
                      initialValue: moment(contInfo.signDate),
                    })(
                      <DatePicker
                        placeholder="请选择"
                        style={{ width: '100%' }}
                        format="YYYY-MM-DD"
                      />
                    )}
                  </FormItem>
                </Col>
                <Col {...colProps}>
                  <FormItem label="签署部门">
                    {getFieldDecorator('signDepId', {
                      rules: [{ required: true, message: '请选择' }],
                    })(
                      <Cascader
                        placeholder="请选择"
                        options={depList}
                        loadData={this.loadAreaData}
                        onChange={this.selectSignDep}
                        changeOnSelect
                      />
                    )}
                  </FormItem>
                </Col>
                <Col {...colProps}>
                  <FormItem label="签署人">
                    {getFieldDecorator('signId', {
                      rules: [{ required: true, message: '请输入' }],
                      initialValue: contInfo.signId,
                    })(
                      <HOCSelect placeholder="请选择" showSearch optionFilterProp="children">
                        {signUserOL}
                      </HOCSelect>
                    )}
                  </FormItem>
                </Col>
              </Row>
              <Row gutter={64}>
                <Col {...colProps}>
                  <FormItem label="原合同有效期">
                    {getFieldDecorator('endDate', {
                      rules: [{ required: true, message: '请选择' }],
                      initialValue: moment(contInfo.endDate),
                    })(
                      <DatePicker
                        placeholder="请选择"
                        style={{ width: '100%' }}
                        format="YYYY-MM-DD"
                        disabled
                      />
                    )}
                  </FormItem>
                </Col>
                <Col {...colProps} />
                <Col {...colProps} />
              </Row>
              <Divider dashed />
              <Row gutter={64}>
                <Col {...colProps}>
                  <FormItem label="新合同有效期">
                    {getFieldDecorator('validityPeriod', {
                      rules: [{ required: true, message: '请选择' }],
                      initialValue: [moment(contInfo.endDate), ''],
                    })(
                      <RangePicker
                        placeholder={['开始日期', '结束日期']}
                        style={{ width: '100%' }}
                        format="YYYY-MM-DD"
                        disabledDate={startValue => this.disabledDate(startValue, contInfo.endDate)}
                      />
                    )}
                  </FormItem>
                </Col>
                <Col {...colProps}>
                  <FormItem label=" 顺延方式">
                    {getFieldDecorator('posWay', {
                      rules: [{ required: true, message: '请选择' }],
                      initialValue: contInfo && contInfo.posWay && contInfo.posWay.toString(),
                    })(
                      <Radio.Group onChange={this.selectPosWay}>
                        {POS_WAY.map(options => (
                          <Radio value={options.itemCode} key={options.itemCode}>{options.itemName}</Radio>
                        ))}
                      </Radio.Group>
                    )}
                  </FormItem>
                </Col>
                {posNum === '3' ? (
                  <Col {...colProps}>
                    <FormItem label="顺延月数">
                      {getFieldDecorator('posDate', {
                        rules: [{ required: true, message: '请输入' }],
                        initialValue: contInfo.posDate || null,
                      })(
                        <InputNumber
                          placeholder="请输入"
                          min={1}
                          max={100}
                          style={{ width: '100%' }}
                        />
                      )}
                    </FormItem>
                  </Col>
                ) : null}
              </Row>
            </Card>
            <Card title={<span style={{ fontWeight: 'bolder' }}>合同约定</span>}>
              <Row gutter={64}>
                <Col {...colProps}>
                  <FormItem label="付款方式">
                    {getFieldDecorator('crmCustContConfig.payWay', {
                      rules: [{ required: false, message: '请选择' }],
                      initialValue:
                        contInfo &&
                        contInfo.crmCustContConfig &&
                        contInfo.crmCustContConfig.payWay &&
                        contInfo.crmCustContConfig.payWay.toString(),
                    })(
                      <HOCSelect
                        placeholder="请选择"
                        allowClear
                        showSearch
                        optionFilterProp="children"
                      >
                        {dictOL(PAY_WAY)}
                      </HOCSelect>
                    )}
                  </FormItem>
                </Col>
                <Col {...colProps}>
                  <FormItem label={<span>账单交付日</span>}>
                    {getFieldDecorator('crmCustContConfig.billDelvDay', {
                      rules: [{ required: false, message: '请输入' }],
                      initialValue:
                        contInfo &&
                        contInfo.crmCustContConfig &&
                        contInfo.crmCustContConfig.billDelvDay,
                    })(
                      <InputNumber
                        min={1}
                        max={31}
                        style={{ width: '100%' }}
                        placeholder="请输入"
                      />
                    )}
                  </FormItem>
                </Col>
                <Col {...colProps}>
                  <FormItem label="客户付款周期">
                    {getFieldDecorator('crmCustContConfig.payPeriod', {
                      rules: [{ required: false, message: '请选择' }],
                      initialValue:
                        contInfo &&
                        contInfo.crmCustContConfig &&
                        contInfo.crmCustContConfig.payPeriod &&
                        contInfo.crmCustContConfig.payPeriod.toString(),
                    })(
                      <HOCSelect
                        placeholder="请选择"
                        allowClear
                        showSearch
                        optionFilterProp="children"
                      >
                        {dictOL(CUST_PAY_PERIOD)}
                      </HOCSelect>
                    )}
                  </FormItem>
                </Col>
              </Row>
              <Row gutter={64}>
                <Col {...colProps}>
                  <FormItem label="发票邮寄周期">
                    {getFieldDecorator('crmCustContConfig.invPeriod', {
                      rules: [{ required: false, message: '请输入' }],
                      initialValue:
                        contInfo &&
                        contInfo.crmCustContConfig &&
                        contInfo.crmCustContConfig.invPeriod &&
                        contInfo.crmCustContConfig.invPeriod.toString(),
                    })(
                      <HOCSelect
                        placeholder="请选择"
                        allowClear
                        showSearch
                        optionFilterProp="children"
                      >
                        {dictOL(CUST_PAY_PERIOD)}
                      </HOCSelect>
                    )}
                  </FormItem>
                </Col>
                <Col {...colProps}>
                  <FormItem label="工资发放日">
                    {getFieldDecorator('crmCustContConfig.payoutDay', {
                      rules: [{ required: false, message: '请输入' }],
                      initialValue:
                        contInfo &&
                        contInfo.crmCustContConfig &&
                        contInfo.crmCustContConfig.payoutDay,
                    })(
                      <InputNumber
                        min={1}
                        max={31}
                        style={{ width: '100%' }}
                        placeholder="请输入"
                      />
                    )}
                  </FormItem>
                </Col>
                <Col {...colProps}>
                  <FormItem label="预付款">
                    {getFieldDecorator('crmCustContConfig.advancePrice', {
                      rules: [{ required: false, message: '请输入' }],
                      initialValue:
                        contInfo &&
                        contInfo.crmCustContConfig &&
                        contInfo.crmCustContConfig.advancePrice,
                    })(
                      <InputNumber
                        precision={2}
                        min={0}
                        max={9999999.99}
                        style={{ width: '100%' }}
                        placeholder="请输入"
                      />
                    )}
                  </FormItem>
                </Col>
              </Row>
              <Row gutter={64}>
                <Col {...colProps}>
                  <FormItem label="资料收取" style={{ marginBottom: 10 }}>
                    {getFieldDecorator('crmCustContConfig.matColtWay', {
                      rules: [{ required: false, message: '请输入' }],
                      initialValue:
                        contInfo &&
                        contInfo.crmCustContConfig &&
                        contInfo.crmCustContConfig.matColtWay &&
                        contInfo.crmCustContConfig.matColtWay.toString(),
                    })(
                      <Radio.Group>
                        {SEND_MAT_COLT_WAY.map(options => (
                          <Radio key={options.itemCode} value={options.itemCode}>
                            {options.itemName}
                          </Radio>
                        ))}
                      </Radio.Group>
                    )}
                  </FormItem>
                </Col>
                <Col {...colProp}>
                  <Row type="flex" justify="space-around">
                    <Col xs={24} sm={6} md={6} lg={6} xl={6}>
                      <FormItem label="发票交付" style={{ marginBottom: 10 }}>
                        {getFieldDecorator('crmCustContConfig.invDelvType', {
                          rules: [{ required: false, message: '请输入' }],
                          initialValue:
                            contInfo &&
                            contInfo.crmCustContConfig &&
                            contInfo.crmCustContConfig.invDelvType &&
                            contInfo.crmCustContConfig.invDelvType.toString(),
                        })(
                          <Radio.Group>
                            {INV_DELV_TYPE.map(options => (
                              <Col key={options.itemCode}>
                                <Radio value={options.itemCode}>{options.itemName}</Radio>
                              </Col>
                            ))}
                          </Radio.Group>
                        )}
                      </FormItem>
                    </Col>
                    <Col xs={24} sm={8} md={8} lg={8} xl={8}>
                      <FormItem label="&nbsp;">
                        {getFieldDecorator('crmCustContConfig.invCate', {
                          rules: [{ required: false, message: '请输入' }],
                          initialValue:
                            contInfo &&
                            contInfo.crmCustContConfig &&
                            contInfo.crmCustContConfig.invCate &&
                            contInfo.crmCustContConfig.invCate.toString(),
                        })(
                          <Radio.Group>
                            {INV_CATE.map(options => (
                              <Col key={options.itemCode}>
                                <Radio value={options.itemCode}>{options.itemName}</Radio>
                              </Col>
                            ))}
                          </Radio.Group>
                        )}
                      </FormItem>
                    </Col>
                    <Col xs={24} sm={6} md={6} lg={6} xl={6}>
                      <FormItem label="&nbsp;">
                        {getFieldDecorator('crmCustContConfig.invType', {
                          rules: [{ required: false, message: '请输入' }],
                          initialValue:
                            contInfo &&
                            contInfo.crmCustContConfig &&
                            contInfo.crmCustContConfig.invType &&
                            contInfo.crmCustContConfig.invType.toString(),
                        })(
                          <Radio.Group>
                            {INV_TYPE.map(options => (
                              <Col key={options.itemCode}>
                                <Radio value={options.itemCode}>{options.itemName}</Radio>
                              </Col>
                            ))}
                          </Radio.Group>
                        )}
                      </FormItem>
                    </Col>
                    <Col xs={24} sm={4} md={4} lg={4} xl={4}>
                      <FormItem label="&nbsp;">
                        {getFieldDecorator('crmCustContConfig.invDelvWay', {
                          rules: [{ required: false, message: '请输入' }],
                          initialValue:
                            contInfo &&
                            contInfo.crmCustContConfig &&
                            contInfo.crmCustContConfig.invDelvWay &&
                            contInfo.crmCustContConfig.invDelvWay.toString(),
                        })(
                          <Radio.Group>
                            {INV_DELV_WAY.map(options => (
                              <Col key={options.itemCode}>
                                <Radio value={options.itemCode}>{options.itemName}</Radio>
                              </Col>
                            ))}
                          </Radio.Group>
                        )}
                      </FormItem>
                    </Col>
                  </Row>
                </Col>
              </Row>
            </Card>
            <Card title={<span style={{ fontWeight: 'bolder' }}>收费设置</span>}>
              <Row gutter={64}>
                <Col {...colProps}>
                  <FormItem
                    label={
                      <Tooltip
                        placement="right"
                        title={
                          <div>
                            <p>1.派单收费：增减员后可提前根据派出信息产生账单费用；</p>
                            <p>
                              2.截止日前交接收费：单流的情况下员工服务在申报截止日前提交运行后险种可生成收费账单，离职人员按照派单收费规则，减员之后直接生成账单；
                            </p>
                            <p>3.申报成功收费：增员申报成功后可生成账单费用；</p>
                            <p>
                              以上只针对本公司执行业务，涉及供应商执行的数据全部按照派单收费规则收费。
                            </p>
                          </div>
                        }
                      >
                        <span>社保收费规则</span>
                        <ExclamationCircleOutlined style={{ marginLeft: 5 }} />
                      </Tooltip>
                    }
                  >
                    {getFieldDecorator('crmCustContConfig.insFeeRule', {
                      rules: [{ required: false, message: '请选择收费规则' }],
                      initialValue:
                        contInfo &&
                        contInfo.crmCustContConfig &&
                        contInfo.crmCustContConfig.insFeeRule &&
                        contInfo.crmCustContConfig.insFeeRule.toString(),
                    })(
                      <HOCSelect
                        placeholder="请选择"
                        allowClear
                        showSearch
                        optionFilterProp="children"
                      >
                        {dictOL(FEE_RULE)}
                      </HOCSelect>
                    )}
                  </FormItem>
                </Col>
                <Col {...colProps}>
                  <FormItem
                    label={
                      <Tooltip
                        placement="right"
                        title={
                          <div>
                            <p>1.派单收费：增减员后可提前根据派出信息产生账单费用；</p>
                            <p>
                              2.截止日前交接收费：单流的情况下员工服务在申报截止日前提交运行后险种可生成收费账单，离职人员按照派单收费规则，减员之后直接生成账单；
                            </p>
                            <p>3.申报成功收费：增员申报成功后可生成账单费用；</p>
                            <p>
                              以上只针对本公司执行业务，涉及供应商执行的数据全部按照派单收费规则收费。
                            </p>
                          </div>
                        }
                      >
                        <span>公积金收费规则</span>
                        <ExclamationCircleOutlined style={{ marginLeft: 5 }} />
                      </Tooltip>
                    }
                  >
                    {getFieldDecorator('crmCustContConfig.accuFeeRule', {
                      rules: [{ required: false, message: '请选择规则' }],
                      initialValue:
                        contInfo &&
                        contInfo.crmCustContConfig &&
                        contInfo.crmCustContConfig.accuFeeRule &&
                        contInfo.crmCustContConfig.accuFeeRule.toString(),
                    })(
                      <HOCSelect
                        placeholder="请选择"
                        allowClear
                        showSearch
                        optionFilterProp="children"
                      >
                        {dictOL(FEE_RULE)}
                      </HOCSelect>
                    )}
                  </FormItem>
                </Col>
                <Col {...colProps}>
                  <FormItem label="最低收费">
                    {getFieldDecorator('crmCustContConfig.lowestPrice', {
                      rules: [
                        {
                          required: false,
                          message: '请输入小数点不超过2位的数字',
                          pattern: /^-?\d+\.?\d{0,2}$/,
                        },
                      ],
                      initialValue:
                        contInfo &&
                        contInfo.crmCustContConfig &&
                        contInfo.crmCustContConfig.lowestPrice,
                    })(
                      <InputNumber
                        min={0}
                        max={9999999.99}
                        precision={2}
                        style={{ width: '100%' }}
                        placeholder="请输入"
                      />
                    )}
                  </FormItem>
                </Col>
              </Row>
              <Row gutter={64}>
                <Col {...colProps}>
                  <FormItem
                    label={
                      <Tooltip
                        placement="right"
                        title={"如选择'是'则代收代付项开具服务费发票，并生成增值税费用。"}
                      >
                        <span>是否全额计税</span>
                        <ExclamationCircleOutlined style={{ marginLeft: 5 }} />
                      </Tooltip>
                    }
                  >
                    {getFieldDecorator('crmCustContConfig.fullyFlag', {
                      rules: [{ required: true, message: '请选择' }],
                      initialValue:
                        contInfo &&
                        contInfo.crmCustContConfig &&
                        contInfo.crmCustContConfig.fullyFlag &&
                        contInfo.crmCustContConfig.fullyFlag.toString(),
                    })(
                      <Select placeholder="请选择" onChange={this.selectFullMenoy} disabled>
                        {dictOL(YES_NO_FLAG)}
                      </Select>
                    )}
                  </FormItem>
                </Col>
                {isFullMenoy ? (
                  <Col {...colProps}>
                    <FormItem
                      label={
                        <Tooltip
                          placement="right"
                          title="该税率是计算：由于代收代付部分开服务发票而产生的增值税"
                        >
                          <span>税率</span>
                          <ExclamationCircleOutlined style={{ marginLeft: 5 }} />
                        </Tooltip>
                      }
                    >
                      {getFieldDecorator('crmCustContConfig.collTax', {
                        rules: [
                          {
                            required: true,
                            message: '请输入小数点不超过3位的数字',
                            pattern: /^-?\d+\.?\d{0,3}$/,
                          },
                        ],
                        initialValue:
                          (contInfo &&
                            contInfo.crmCustContConfig &&
                            contInfo.crmCustContConfig.collTax) ||
                          0.001,
                      })(
                        <InputNumber
                          min={0.001}
                          max={100}
                          formatter={value => `${value}%`}
                          parser={value => value.replace('%', '')}
                          style={{ width: '100%' }}
                          disabled
                        />
                      )}
                    </FormItem>
                  </Col>
                ) : null}
              </Row>
              <Row gutter={64}>
                <Col {...colProps}>
                  <FormItem label="账单拆分规则">
                    {getFieldDecorator('crmCustContConfig.splitFlag', {
                      rules: [{ required: false, message: '请选择' }],
                      initialValue:
                        (contInfo &&
                          contInfo.crmCustContConfig &&
                          contInfo.crmCustContConfig.splitFlag &&
                          contInfo.crmCustContConfig.splitFlag.length && ['2']) ||
                        [],
                    })(<CheckboxGroup options={checkboxOptions(SPLIT_RULES)} />)}
                  </FormItem>
                </Col>
                <Col {...colProps}>
                  <FormItem label="垫付设置">
                    {getFieldDecorator('crmCustContConfig.paidFlag', {
                      rules: [{ required: false, message: '请选择' }],
                      initialValue:
                        (contInfo &&
                          contInfo.crmCustContConfig &&
                          contInfo.crmCustContConfig.paidFlag &&
                          contInfo.crmCustContConfig.paidFlag.length && ['1']) ||
                        [],
                    })(<CheckboxGroup options={checkboxOptions(CONT_SPOT)} />)}
                  </FormItem>
                </Col>
              </Row>
            </Card>
            <Card
              title={
                <div style={{ fontWeight: 'bolder' }}>
                  <span>付款日期设置</span>
                </div>
              }
            >
              <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                <Col sm={24} md={8}>
                  <FormItem
                    labelCol={{ md: { span: 7 } }}
                    wrapperCol={{ md: { span: 16 } }}
                    label={
                      <Tooltip
                        placement="right"
                        title="默认设置注释：付款日期主要分为以下四种方式：1、当月某天付款；2、次月某天付款；3、发票交给客户之后几天付款（发票打印日期判断为已交客户）；4、账单交给客户之后几天付款（账单发布财务判断为已交客户）。"
                      >
                        <span style={{ lineHeight: '32px' }}>默认设置</span>
                        <ExclamationCircleOutlined style={{ marginLeft: 5 }} />
                      </Tooltip>
                    }
                    style={{ paddingBottom: '-24px' }}
                  >
                    {getFieldDecorator('selectionType', {
                      rules: [{ required: true, message: '请选择' }],
                      initialValue:
                        contInfo &&
                        contInfo.defaultAccoPeriod &&
                        contInfo.defaultAccoPeriod.selectionType &&
                        contInfo.defaultAccoPeriod.selectionType.toString(),
                    })(
                      <HOCSelect
                        placeholder="请选择"
                        showSearch
                        optionFilterProp="children"
                        onChange={this.selectSelectionType}
                      >
                        {dictOL(SELECTION_TYPE)}
                      </HOCSelect>
                    )}
                  </FormItem>
                </Col>
                <Col md={8} sm={24}>
                  <FormItem style={{ paddingBottom: '-24px' }}>
                    {getFieldDecorator('defaultAccoPeriod.accoPeriodDays', {
                      rules: [{ required: true, message: '请输入' }],
                      initialValue:
                        contInfo &&
                        contInfo.defaultAccoPeriod &&
                        contInfo.defaultAccoPeriod.accoPeriodDays,
                    })(
                      <InputNumber
                        placeholder="天数/日期"
                        min={1}
                        max={30}
                        onChange={this.changeDays}
                        style={{ width: '100%' }}
                      />
                    )}
                  </FormItem>
                </Col>
                <Col md={8} sm={24} style={{ lineHeight: '32px' }}>
                  {selectSelectionType && selectionTypeDays ? (
                    <span style={{ marginRight: 40 }}>
                      {' '}
                      例：{selectSelectionType}
                      {selectionTypeDays}日
                    </span>
                  ) : null}
                </Col>
              </Row>
            </Card>
            <Card title={<span style={{ fontWeight: 'bolder' }}>特殊要求</span>}>
              {getFieldDecorator('crmCustContConfig.speReq', {
                rules: [{ required: false, message: '200字以内' }],
                initialValue:
                  (contInfo && contInfo.crmCustContConfig && contInfo.crmCustContConfig.speReq) ||
                  null,
              })(<TextArea rows={4} placeholder="请输入" />)}
            </Card>
            <Card title={<span style={{ fontWeight: 'bolder' }}>附件</span>}>
              <Row gutter={64}>
                <Col {...colProps}>
                  <Row style={{ fontWeight: 'bold', marginBottom: 10 }}>合同电子版WORD版</Row>
                  {contInfo.listContFileWord && contInfo.listContFileWord.length
                    ? contInfo.listContFileWord.map(item => (
                      <Row key={item.contFileId} style={{ marginBottom: 10 }}>
                        <a
                          onClick={e => {
                            e.preventDefault();
                            downloadFile({ fileId: item.fileFileid, fileName: item.fileName });
                          }}
                        >
                          {item.fileName}
                        </a>
                        <CloseOutlined
                          style={{
                            marginLeft: 30,
                            lineHeight: '20px',
                            color: '#40a9ff',
                            fontSize: '12px',
                          }}
                          onClick={() =>
                            this.delFile(
                              item.contFileId,
                              contInfo.listContFileWord,
                              'listContFileWord'
                            )
                          } 
                        />
                      </Row>
                    ))
                    : null}
                  <Form.Item>
                    {getFieldDecorator('listContFileWord', {
                      rules: [
                        {
                          required: !(
                            contInfo.listContFileWord && contInfo.listContFileWord.length
                          ),
                          message: '请上传word版文件',
                        },
                      ],
                      valuePropName: 'fileList',
                      getValueFromEvent: uploadFileFormat,
                    })(
                      <Upload {...propsUploadWord}>
                        <Button>
                          <UploadOutlined /> 上传附件
                        </Button>
                      </Upload>
                    )}
                  </Form.Item>
                </Col>
                <Col {...colProps}>
                  <Row style={{ fontWeight: 'bold', marginBottom: 10 }}>合同扫描文件PDF版</Row>
                  {contInfo.listContFilePdf && contInfo.listContFilePdf.length
                    ? contInfo.listContFilePdf.map(item => (
                      <Row key={item.contFileId} style={{ marginBottom: 10 }}>
                        <a
                          onClick={e => {
                            e.preventDefault();
                            downloadFile({ fileId: item.fileFileid, fileName: item.fileName });
                          }}
                        >
                          {item.fileName}
                        </a>
                        <CloseOutlined
                          style={{
                            marginLeft: 30,
                            lineHeight: '20px',
                            color: '#40a9ff',
                            fontSize: '12px',
                          }}
                          onClick={() =>
                            this.delFile(
                              item.contFileId,
                              contInfo.listContFilePdf,
                              'listContFilePdf'
                            )
                          } 
                        />
                      </Row>
                    ))
                    : null}
                  <Form.Item>
                    {getFieldDecorator('listContFilePdf', {
                      rules: [
                        {
                          required: !(contInfo.listContFilePdf && contInfo.listContFilePdf.length),
                          message: '请上传pdf文件',
                        },
                      ],
                      valuePropName: 'fileList',
                      getValueFromEvent: uploadFileFormat,
                    })(
                      <Upload {...propsUploadPdf}>
                        <Button>
                          {' '}
                          <UploadOutlined /> 上传附件
                        </Button>
                      </Upload>
                    )}
                  </Form.Item>
                </Col>
                <Col {...colProps}>
                  <Row style={{ fontWeight: 'bold', marginBottom: 10 }}>其它附件</Row>
                  {contInfo.listContFileOther && contInfo.listContFileOther.length
                    ? contInfo.listContFileOther.map(item => (
                      <Row key={item.contFileId} style={{ marginBottom: 10 }}>
                        <a
                          onClick={e => {
                            e.preventDefault();
                            downloadFile({ fileId: item.fileFileid, fileName: item.fileName });
                          }}
                        >
                          {item.fileName}
                        </a>
                        <CloseOutlined
                          style={{
                            marginLeft: 30,
                            lineHeight: '20px',
                            color: '#40a9ff',
                            fontSize: '12px',
                          }}
                          onClick={() =>
                            this.delFile(
                              item.contFileId,
                              contInfo.listContFileOther,
                              'listContFileOther'
                            )
                          } 
                        />
                      </Row>
                    ))
                    : null}
                  <Form.Item>
                    {getFieldDecorator('listContFileOther', {
                      valuePropName: 'fileList',
                      getValueFromEvent: uploadFileFormat,
                    })(
                      <Upload {...propsUpload}>
                        <Button>
                          {' '}
                          <UploadOutlined /> 上传附件
                        </Button>
                      </Upload>
                    )}
                  </Form.Item>
                </Col>
              </Row>
            </Card>
            <FooterToolbar style={{ width: '100%' }}>
              <Button onClick={this.cancel} style={{ marginRight: 10 }}>
                取消
              </Button>
              <Button type="primary" onClick={this.sumSubmit}>
                提交
              </Button>
            </FooterToolbar>
          </PageHeaderWrapper>
        </Form>
      </Spin>
    );
  }
}
export default BasicForm;
